<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Joke Generator</title>

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body{
			background-color: rgb(37,38,39);
			color: white;
		}
		section{
			min-height: 100vh;
			width: 100%;
			padding: 100px 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.container{
			width: 90%;
			max-width: 500px;
			margin: 0 auto;
			background-color: rgb(51,55,59);
			border-radius: 8px;
			padding: 3rem;
			display: flex;
			flex-direction: column;
		}
		.container p{
			font-size: 2rem;
			font-weight: 300;
			line-height: 3rem;
			text-align: justify;
		}
		button{
			margin-top: 4rem;
			width: fit-content;
			padding: 2rem;
			font-size: 2rem;
			background-color: rgb(25,28,29);
			color: white;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			align-self: flex-end;
		}
	</style>
</head>
<body>
	<section>
		<div class="container">
			<div class="joke"><p>Generating...</p></div>
			<button>Get Joke</button>
		</div>
	</section>

	<script type="text/javascript">
		const button=document.querySelector('.container button');
		const jokeText=document.querySelector('.container p');
		document.addEventListener('DOMContentLoaded', getJoke)

		button.addEventListener('click',getJoke);

		async function getJoke(){
			const jokeData=await fetch('https://icanhazdadjoke.com/',{
				headers:{
					'Accept':'application/json'
				}
			});
			const jokeObj=await jokeData.json();
			jokeText.innerHTML=jokeObj.joke;
		}
	</script>

</body>
</html>